/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */
@import 'uview-ui/theme.scss';

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.hover-class::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
}

/* Flex布局 */
@mixin flex($direction: row, $align: center, $justify: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  flex-wrap: $wrap;
}

/* 箭头 */
@mixin arrow($width: 48, $color: #999, $size: 2, $rotate: 45) {
  width: #{$width * 1.5}rpx;
  height: #{$width}rpx;
  overflow: hidden;
  &::before {
    content: '';
    width: #{$width * .4}rpx;
    height: #{$width * .4}rpx;
    box-sizing: border-box;
    border-top: #{$size}px solid $color;
    border-right: #{$size}px solid $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(#{$rotate}deg);
  }
}

/* 关闭图标 */
@mixin close($size: 88, $color: #999) {
  width: #{$size}rpx;
  height: #{$size}rpx;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: '';
    width: 40%;
    height: 2px;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    content: '';
    width: 2px;
    height: 40%;
    background-color: $color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
/* 边线 */
@mixin line($direction: bottom, $class: after, $color: $uni-border-color, $margin: 0, $left: 0) {
  &::#{$class} {
    content: '';
    width: 100%;
    height: 1px;
    background-color: $color;
    position: absolute;
    left: #{$left}rpx;
    #{$direction}: #{$margin}px;
    transform: scaleY(0.5);
    transform-origin: left $direction;
  }
}